<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui">
	<h:head> 
</h:head>
<h:body>
	<f:metadata>
   		<f:viewParam name="tpid" value="#{packageCustomizationBean.TPId}" />
   		<f:viewAction action="#{packageCustomizationBean.init}" />
	</f:metadata>
	
	<h:form id="form">
	
 		<p:contextMenu for="rooms" widgetVar="cMenu">     
        	<p:menuitem value="Edit Cell" icon="ui-icon-search" onclick="PF('roomsTable').showCellEditor();return false;"/>    
        	<p:menuitem value="Hide Menu" icon="ui-icon-close" onclick="PF('cMenu').hide()"/>    
    	</p:contextMenu>
    	
    <h3>Customize your hotel</h3>  
    <p:panel id="hotelPanel" header="Hotels in #{reservationBean.selectedMean.location.name}" toggleable="true" toggleOrientation="horizontal">  
     	<p:dataTable id="hotelsTable" var="h" value="#{packageCustomizationBean.hotelDataModel}"
     		selection="#{packageCustomizationBean.selectedHotel}" selectionMode="single">    
  
  		<p:ajax update=":form:hotelPanel" event="rowSelect" listener="#{packageCustomizationBean.onHotelSelect}" />
        <f:facet name="header">  
            Expand rows to see detailed information  
        </f:facet>  
  
        <p:column style="width:2%">  
            <p:rowToggler />  
        </p:column>  
  
        <p:column style="width:98%" headerText="Hotel name">  
            <h:outputText value="#{h.name}" />  
        </p:column>   
  
        <p:rowExpansion>  
        	<p:dataList var="r" itemType="circle" value="#{packageCustomizationBean.getRoomsAsList(h)}">
        		Quantity #{r.type.toString()}: #{r.totalRooms}, at #{r.price.toPlainString()} € 
        	</p:dataList>    
       	</p:rowExpansion>  
    	</p:dataTable>     
    
    	<p:dataTable id="rooms" var="r" rendered="#{packageCustomizationBean.selectedHotel != null}" value="#{packageCustomizationBean.selectedRooms}"
				editable="true" editMode="cell" widgetVar="roomsTable">
				 
				<p:column headerText="Room type">
					<p:outputLabel value="#{r.type.toString()}"/>
				</p:column>
				
				<p:column headerText="Hotel rooms">
					<p:outputLabel value="#{r.totalRooms}"/>
				</p:column>
				
				<p:column headerText="Price">
					<p:outputLabel value="#{r.price}"/>
				</p:column>
				
				<p:column headerText="Your needs">
					<p:cellEditor>  
                   		<f:facet name="output"><h:outputText value="#{r.selectedRooms}" /></f:facet>  
                   		<f:facet name="input"><p:inputText id="valueInput" value="#{r.selectedRooms}" style="width:96%"/></f:facet>  
               		</p:cellEditor>
				</p:column>
		</p:dataTable>
	</p:panel>
    <h3>Customize your excursions</h3>  
    <p:panel header="Excursions in #{reservationBean.selectedMean.location.name}" toggleable="true" toggleOrientation="horizontal">  
         <p:dataTable id="excursions" var="ex" value="#{packageCustomizationBean.exsDataModel}"
	    		selection="#{packageCustomizationBean.selectedExs}">
     	
     	<p:column selectionMode="multiple" style="width:1%" />  
  
        <p:column headerText="Excursion name" style="width:33%">  
            #{ex.name}  
        </p:column>  
  
        <p:column headerText="Excursion day" style="width:33%">  
            #{ex.weekDay.toString()}  
        </p:column> 
        
        <p:column headerText="Excursion price" style="width: 33%">
        	#{ex.price.toPlainString()}
        </p:column>
     	</p:dataTable> 
    </p:panel>

   	<p:panel id="footerPanel">
    	<p:commandButton update=":form:footerPanel" icon="ui-icon-check" value="Customize" action="#{packageCustomizationBean.customize()}"/>
    	<p:button value="Cancel" outcome="PackageView?includeViewParams=true" />
    	<p:outputLabel rendered="#{not empty packageCustomizationBean.error}" 
    		value="#{packageCustomizationBean.error}" style="color: red"/>
   	</p:panel>

    </h:form> 
    </h:body>
</html>